<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		        <script>
            window.onload = function() {
                var oBox = document.getElementById("box");
                var oBox1 = document.getElementById("box1"); //红色的div块
                var oBox2 = document.getElementById("box2"); //蓝色的块
                 console.log(oBox1.offsetLeft);
                 console.log(oBox1.offsetTop);

                //offsetLeft/offsetTop: 只读

                //帧
                var tmpX = 4; //x方向的运动量
                var tmpY = 10; //y方向的运动量
                var tmpX2 = 2; //x方向的运动量
                var tmpY2 = 5; //y方向的运动量
                setInterval(function(){

                    //红色的块 ，判断横向是否越界
                    if (parseInt(oBox1.offsetLeft) + parseInt(oBox1.style.width) > parseInt(oBox.style.width) || parseInt(oBox1.offsetLeft) < 0) {
                        tmpX *= -1; //取反
                    }
                    //红色div，判断纵向是否越界
                    if (parseInt(oBox1.offsetTop) + parseInt(oBox1.style.height) > parseInt(oBox.style.height) || parseInt(oBox1.offsetTop) < 0) {
                        tmpY *= -1; //取反
                    }

                    oBox1.style.left = parseInt(oBox1.offsetLeft) + tmpX + "px";
                    oBox1.style.top = parseInt(oBox1.offsetTop) + tmpY + "px";

                    //蓝色的块 ,判断横向是否越界
                    if (parseInt(oBox2.offsetLeft) + parseInt(oBox2.style.width) > parseInt(oBox.style.width) || parseInt(oBox2.offsetLeft) < 0) {
                        tmpX2 *= -1; //取反
                    }
                     //蓝色div，判断纵向是否越界
                    if (parseInt(oBox2.offsetTop) + parseInt(oBox2.style.height) > parseInt(oBox.style.height) || parseInt(oBox2.offsetTop) < 0) {
                        tmpY2 *= -1; //取反
                    }
                    oBox2.style.left = parseInt(oBox2.offsetLeft) + tmpX2 + "px";
                    oBox2.style.top = parseInt(oBox2.offsetTop) + tmpY2 + "px";

                }, 5);

            }
        </script>
	</head>
	<body>
		     <div id="box" style="background: #666; width: 400px; height: 400px; position: absolute; left: 200px; top: 30px;">
            <div id="box1" style="background: red; width: 20px; height: 20px; position: absolute; top: 10px; left: 10px;"></div>
            <div id="box2" style="background: blue; width: 20px; height: 20px; position: absolute; top: 10px; left: 10px;"></div>
        </div>
	</body>
</html>
